<template>
  <div class="skeleton-loader">
    <div class="skeleton-header" v-if="showHeader">
      <div class="skeleton-title"></div>
      <div class="skeleton-subtitle"></div>
    </div>
    
    <div class="skeleton-content">
      <div v-for="i in rows" :key="i" class="skeleton-row">
        <div class="skeleton-avatar" v-if="showAvatar"></div>
        <div class="skeleton-lines">
          <div class="skeleton-line"></div>
          <div class="skeleton-line" style="width: 80%"></div>
          <div class="skeleton-line" style="width: 60%" v-if="i % 2 === 0"></div>
        </div>
      </div>
    </div>
    
    <div class="skeleton-cards" v-if="type === 'cards'">
      <div v-for="i in 3" :key="`card-${i}`" class="skeleton-card">
        <div class="skeleton-card-header"></div>
        <div class="skeleton-card-body">
          <div class="skeleton-line"></div>
          <div class="skeleton-line" style="width: 70%"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SkeletonLoader',
  props: {
    rows: {
      type: Number,
      default: 3
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    showAvatar: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'list' // list, cards
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../styles/variables.scss';

.skeleton-loader {
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

.skeleton-header {
  margin-bottom: 30px;
  
  .skeleton-title {
    height: 24px;
    width: 30%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 12px;
  }
  
  .skeleton-subtitle {
    height: 16px;
    width: 50%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    animation-delay: 0.1s;
    border-radius: 4px;
  }
}

.skeleton-content {
  .skeleton-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    
    .skeleton-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      margin-right: 16px;
      flex-shrink: 0;
    }
    
    .skeleton-lines {
      flex: 1;
      
      .skeleton-line {
        height: 14px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        border-radius: 4px;
        margin-bottom: 8px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

.skeleton-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  
  .skeleton-card {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    .skeleton-card-header {
      height: 120px;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      border-radius: 8px;
      margin-bottom: 16px;
    }
    
    .skeleton-card-body {
      .skeleton-line {
        height: 14px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        border-radius: 4px;
        margin-bottom: 8px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>